<template>
    <view class="courseRecord">
		<mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ native: true }" @down="downCallback" :up="upOption"
		  @up="upCallback">
		<view class="hk-box">
		  <view class="hk-list" v-for="item in record_list.data" :key="item.id" @click="goCourse(item)">
			  <image class="left-image" v-if="item.thumbnail" :src="getImgUrl(item.thumbnail)" mode="aspectFill"></image>
			  <image class="left-image" v-else mode="aspectFill"></image>
			  <view class="right-content">
				  <view class="title">{{ item.title ? item.title : ''}}</view>
				  <view class="desc">{{ item.description ? item.description : '' }}</view>
				  <!-- <view class="permission-tag" v-if="item.course">
				  	<u-tag :text="item.course && item.course.permission == 10 ? '所有人' : item.course && item.course.permission == 20 ? '会员' : '-'" mode="light" type="success" size="mini" />
				  </view> -->
			  </view>
		  </view>
		</view>
		</mescroll-body>
	</view>
</template>

<script>
  import * as UserApi from '@/api/user'
  import { getMoreListData } from '@/core/app'
  import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins'
  import { ImgUrlPrefix } from '@/utils/util.js'
  // 每页记录数量
  const pageSize = 15
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
		  // 上拉加载配置
		  upOption: {
		    // 首次自动执行
		    auto: true,
		    // 每页数据的数量; 默认10
		    page: { size: pageSize },
		    // 数量要大于4条才显示无更多数据
		    noMoreSize: 4,
		    // 空布局
		    empty: {
		      tip: '暂无数据'
		    }
		  },
		  // 观看记录数据
		  record_list: {
		  	data: []
		  },
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
     
    },
    onShow() {
    	// this.getCourseRecord()
    },
    methods: {
		/**
		 * 上拉加载的回调 (页面初始化时也会执行一次)
		 * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
		 * @param {Object} page
		 */
		upCallback(page) {
		  console.log(page)
		  const app = this
		  // 设置列表数据
		  app.getCourseRecordList(page.num)
		    .then(list => {
			  console.log(list,'list')
		      const curPageLen = list.items.length
		      const totalSize = list.total
		      app.mescroll.endBySize(curPageLen, totalSize)
		    })
		    .catch(() => app.mescroll.endErr())
		},
		
		// 用户播放记录
		getCourseRecordList(pageNo =1) {
			const app = this
			return new Promise((resolve, reject) => {
			UserApi.courseRecord({ page: pageNo }, { load: false })
				.then(result => {
				  // 合并新数据
				  const newList = result.data
				  app.record_list.data = getMoreListData(newList, app.record_list, pageNo)
				  console.log('app.record_list.data', app.record_list.data)
				  resolve(newList)
				})
			})
	    },
	    goCourse(val) {
	  	    this.$navTo('pages/course/course', { id: val.id, name: val.title, thumbnail: val.thumbnail })
	    },
	    // 图片地址拼接
	    getImgUrl(val) {
	       const url = ImgUrlPrefix(val)
	       return url
	    },
    }
  }
</script>

<style lang="scss" scoped>
 .courseRecord{
	 .hk-box{
		  padding: 16rpx;
		 .hk-list{
			 display: flex;
			 background-color: #fff;
			 border-radius: 14rpx;
			 padding: 30rpx;
			 margin-bottom: 20rpx;
			 .left-image{
				 width: 300rpx;
				 height: 200rpx;
				 border-radius: 14rpx;
				 margin-right: 20rpx;
				 object-fit: cover;
				 background-color: #eee;
			 }
			 .right-content{
				 flex:1;
 
 
			 }
			 .title{
				 color: #333;
				 font-size: 32rpx;
			 }
			 .desc{
				 margin-top: 30rpx;
				 color: #999;
				 width:100%;
				 font-size: 24rpx;
				 line-height: 40rpx;
				 display: -webkit-box;
				 -webkit-box-orient: vertical;
				 -webkit-line-clamp: 3; /* 显示三行，超出部分使用省略号 */
				 overflow: hidden;
			 }
		 }
	 }
 }
</style>
